<template>
    <div class="common-cover"> 
        <comHeader />
        <div class="common-scroll better-scroll p-t-10">
            <div class="w-1100 common-bg-1 p-20">
                <div class="user-infos">
                    <div class="left pr">
                        <e-form
                    ref="ruleFormRef"
                    :formConfig="formConfig"
                    :formRule="rules"
                    :formData="formdata"
                >
                </e-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { putAuthor } from '@/api/blog/index.js'
import { createFormData } from '@/mixins/tool/tool.js'
function createFromConfig() {
    return [
        {
            label: '用户昵称',
            type: 'input',
            modelName: 'username',
            value: ''
        },
        {
            label: '用户昵称',
            type: 'input',
            modelName: 'username',
            value: ''
        },
        {
            label: '用户昵称',
            type: 'input',
            modelName: 'username',
            value: ''
        },
        
    ]
}

export default {
    components: {
        comHeader: () => import('@/components/comHeader'),
    },
    data() {
        return {
            formConfig: createFromConfig(),
            formdata: {
                _id: '',
                ...createFormData(createFromConfig()),
            },
            pageOption: {
                page: 1,
                limit: 10,
                total: 0,
            },
            params: {
                username: '',
                primary_color: '',
                user_blog_history: '1',
                user_blog_search_type: '1',
                user_first_show_type: '1',
                user_violation_target: '',
                tipGoEmailDayStatus: 1,
                provincial_flow_type: 1,
            },
            email: '', // 游客才需要去绑定邮箱
            password: '',
            rules: {
                username: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    {
                        type: 'string',
                        min: 3,
                        max: 30,
                        message: '长度在 3 到 30 个字符',
                        trigger: 'blur',
                    },
                ],

                // 范围0~100
                user_violation_target: [
                    { required: true, message: '请输入违规目标', trigger: 'blur' },
                    // { type:'number',min: 0, max: 100, message: '范围0~100', trigger: 'blur' },
                    {
                        validator: (rule, value, cb) => {
                            if (value < 0 || value > 100) {
                                return cb(new Error('范围0~100'))
                            }
                            cb()
                        },
                        trigger: 'change',
                    },
                ],
            },
        }
    },
    computed: {
        ...Vuex.mapState(['userdata', 'userTags']),
        ...Vuex.mapGetters(['isAdmin', 'provincial_flow_typeOptions']),
        isTourist() {
            return this.userdata.role === 'tourist'
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        ...Vuex.mapMutations(['setUserData']),
        submit() {
            let { ruleForm } = this.$refs
            if (ruleForm) {
                ruleForm.validate((val) => {
                    if (!val) {
                        return false
                    }

                    // 额外校验
                    let { _id } = this.userdata
                    const { password, email, params, isTourist } = this

                    let params1 = {}
                    if (isTourist) {
                        if ((email || password) && (!email || !password)) {
                            this.$message.error('邮箱或密码不能为空')
                            return false
                        }
                        Object.assign(
                            params1,
                            {
                                _id,
                                email,
                                password,
                            },
                            params,
                        )
                    } else {
                        params1 = Object.assign(params1, params)
                    }
                    putAuthor(params1)
                        .then((res) => {
                            if (this.isObject(res.data)) {
                                this.setUserData({
                                    user: res.data,
                                })
                                this.$message.success('修改成功')
                                localforage.removeItem('tourist_email')
                            }
                        })
                        .catch((err) => {
                            console.log('err',err);
                            
                            this.Toast(err)
                        })
                })
            }
        },
        init() {
            let {
                username,
                primary_color,
                user_blog_history,
                user_blog_search_type,
                user_first_show_type,
                email,
                user_violation_target,
                tipGoEmailDayStatus,
                provincial_flow_type = 1,
            } = this.userdata || {}
            Object.assign(this.params, {
                username,
                primary_color,
                user_blog_history,
                user_blog_search_type,
                user_first_show_type,
                user_violation_target,
                tipGoEmailDayStatus,
                provincial_flow_type: +provincial_flow_type,
            })
            this.email = email
            if (this.isTourist) {
                this.email = ''
                this.password = ''
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.p-20 {
    padding: 20px;
}
h2,
h3,
p {
    color: #444;
}
h3 {
    margin: 12px 0;
}
p {
    line-height: 27px;
}
.o-h {
    overflow: hidden;
}
.pos-user-image {
    right: 20px;
    top: 20px;
    z-index: 100;
}
</style>
